<div [@routerTransition]>
    <div class="m-subheader">
        <div class="d-flex align-items-center">
            <div class="mr-auto col-xs-6">
                <h3 class="m-subheader__title m-subheader__title--separator"><span>定制任务</span></h3>
                <span class="m-section__sub"> 管理定制任务的文本头信息 </span>
            </div>
            <div class="col-xs-6 text-right">
                <button (click)="batchIntoProduceModal.show(2)" class="btn btn-primary blue">
                    <i class="fa fa-plus"></i> 批量定制任务投产
                </button>
          </div>
        </div>
    </div>
    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <div class="tabbable-line">

                    <ul class="nav nav-tabs  m-tabs-line">
                        <li class="nav-item m-tabs__item">
                            <p-tabMenu [model]="tabs" [activeItem]="tabs[0]">
                                <ng-template pTemplate="item" let-item let-i="index">
                                    <div style="position: relative; text-align: center; min-width: 5em;">
                                        <div class="ui-menuitem-text" (click)="tabTypeClick(item.label)">
                                            {{ item.label }}
                                        </div>
                                    </div>
                                </ng-template>
                            </p-tabMenu>
                        </li>
                    </ul>

                    <div class="tab-content" style="padding-top:0;">
                        <div class="tab-pane active" id="tab-model">
                            <form class="horizontal-form" autocomplete="off">
                                <div class="m-form m-form--label-align-right">
                                    <div class="row align-items-center m--margin-bottom-10">
                                        <div class="col-xl-12">
                                            <div class="form-group m-form__group align-items-center">
                                                <div class="input-group">
                                                    <input [(ngModel)]="filterText" name="filterText" autofocus
                                                        class="form-control m-input"
                                                        [placeholder]="l('SearchWithThreeDot')" type="text" />
                                                    <span class="input-group-btn">
                                                        <button (click)="getMonths($event,1)" class="btn btn-primary"
                                                            type="submit">
                                                            <i class="flaticon-search-1"
                                                                [attr.aria-label]="l('Search')"></i>
                                                        </button>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row m--margin-bottom-10" [hidden]="!advancedFiltersAreShown">
                                        <!-- <div class="col-md-6">
                                                <div class="form-group">
                                                    <select #statusCombobox name="statuses" class="form-control"
                                                        [(ngModel)]="statuses" [attr.data-live-search]="true"
                                                        jq-plugin="selectpicker">
                                                        <option value="">按状态搜索</option>
                                                        <option *ngFor="let status of statuses" [value]="status.value">{{
                                        status.displayText
                                  }}</option>
                                                    </select>
                                                </div>
                                            </div> -->

                                        <!-- <div class="col-md-6">
                          <div class="form-group">
                            <select
                              #teamGroupCombobox
                              name="teamGroup"
                              class="form-control"
                              [(ngModel)]="organizationUnitId"
                              [attr.data-live-search]="true"
                              jq-plugin="selectpicker"
                            >
                              <option value="">按班组搜索</option>
                              <option value="0">未分配</option>
                              <option *ngFor="let teamGroup of teamGroups" [value]="teamGroup.value">{{
                                teamGroup.displayText
                              }}</option>
                            </select>
                          </div>
                        </div> -->
                                    </div>

                                    <div class="row margin-bottom-10" *ngIf="advancedFiltersAreShown">
                                        <div class="col-sm-12 text-right">
                                            <button class="btn btn-metal" (click)="getMonths($event,1)">
                                                <i class="fa fa-refresh"></i> {{ l('Refresh') }}
                                            </button>
                                        </div>
                                    </div>
                                    <div class="row margin-bottom-10">
                                        <div class="col-sm-12">
                                            <span class="clickable-item text-muted" *ngIf="!advancedFiltersAreShown"
                                                (click)="advancedFiltersAreShown = !advancedFiltersAreShown">
                                                <i class="fa fa-angle-down"></i> {{ l('ShowAdvancedFilters') }}</span>
                                            <span class="clickable-item text-muted" *ngIf="advancedFiltersAreShown"
                                                (click)="advancedFiltersAreShown = !advancedFiltersAreShown">
                                                <i class="fa fa-angle-up"></i> {{ l('HideAdvancedFilters') }}</span>
                                        </div>
                                    </div>
                                </div>
                            </form>

                            <div class="row align-items-center">
                                <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                                    <p-table #dataTable (onLazyLoad)="getMonths($event,0)"
                                        [value]="primengTableHelper.records"
                                        rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false"
                                        [lazy]="true" emptyMessage="没有数据" scrollable="true" ScrollWidth="100%"
                                        responsive="primengTableHelper.isResponsive"
                                        resizableColumns="primengTableHelper.resizableColumns" dataKey="taskCode">
                                        <ng-template pTemplate="header">
                                            <tr>
                                                <th style="width: 30px"></th>
                                                <th style="width: 130px" *ngIf="isCompleted==false">
                                                    {{ "Actions" | localize }}</th>
                                                <th style="width: 150px" pSortableColumn="taskCode">
                                                    任务号
                                                    <p-sortIcon field="taskCode"></p-sortIcon>
                                                </th>
                                                <th style="width: 150px" pSortableColumn="statusName">
                                                    状态
                                                    <p-sortIcon field="statusName"></p-sortIcon>
                                                </th>
                                                <th style="width: 200px" pSortableColumn="drawingCode">
                                                    图号
                                                    <p-sortIcon field="drawingCode"></p-sortIcon>
                                                </th>
                                                <th style="width: 200px" pSortableColumn="amount">
                                                    数量
                                                    <p-sortIcon field="amount"></p-sortIcon>
                                                </th>
                                                <th style="width: 150px" pSortableColumn="dueDate">
                                                    完成时间
                                                    <p-sortIcon field="dueDate"></p-sortIcon>
                                                </th>
                                                <th style="width: 150px" pSortableColumn="dueDate">
                                                    是否接收
                                                    <p-sortIcon field="isReceived"></p-sortIcon>
                                                </th>
                                                <th style="width: 150px" pSortableColumn="dueDate">
                                                    接收时间
                                                    <p-sortIcon field="isReceived"></p-sortIcon>
                                                </th>
                                                <th style="width: 150px" pSortableColumn="routingLine">
                                                    路线
                                                    <p-sortIcon field="routingLine"></p-sortIcon>
                                                </th>
                                                <th style="width: 150px" pSortableColumn="remark">
                                                    任务备注
                                                    <p-sortIcon field="remark"></p-sortIcon>
                                                </th>
                                                <!-- <th style="width: 150px" pSortableColumn="workShopRemark">
                                                        车间备注
                                                        <p-sortIcon field="workShopRemark"></p-sortIcon>
                                                    </th> -->

                                            </tr>
                                        </ng-template>
                                        <ng-template pTemplate="body" let-record let-expanded="expanded">
                                            <tr>
                                                <td style="width: 30px">
                                                    <a href="#" [pRowToggler]="record">
                                                        <!-- <i class="fa fa-cog"></i> <span class="caret"></span> -->
                                                        <i
                                                            [ngClass]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></i>
                                                    </a>
                                                </td>
                                                <td style="width: 130px" *ngIf="isCompleted==false">
                                                    <div class="btn-group dropdown" dropdown container="body">
                                                        <button dropdownToggle
                                                            class="dropdown-toggle btn btn-sm btn-primary">
                                                            <i class="fa fa-cog"></i><span class="caret"></span>
                                                            {{ "Actions" | localize }}
                                                        </button>
                                                        <ul class="dropdown-menu" *dropdownMenu>
                                                            <li *ngIf="record.isReceived==true">
                                                                <a
                                                                    (click)="putIntoProductionModal.show(record, 2)">投产</a>
                                                            </li>
                                                            <li *ngIf="record.isReceived==false">
                                                                <a (click)="receiveTask(record.id)">接收</a>
                                                            </li>
                                                            <!-- <li *ngIf="record.isReceived==true">
                                                                <a
                                                                    (click)="createOrEditOrderModal.show(record.id,2)">编辑</a>
                                                            </li>
                                                            <li *ngIf="record.isReceived==true">
                                                                <a (click)="deleteModel(record.id)">删除</a>
                                                            </li> -->
                                                        </ul>
                                                    </div>
                                                </td>
                                                <td style="width: 150px">
                                                    <span class="ui-column-title"> 任务号</span>
                                                    {{ record.taskCode }}
                                                </td>
                                                <td style="width: 150px">
                                                    <span class="ui-column-title"> 状态</span>
                                                    <div *ngIf="record.isCompleted==false"
                                                        style="position: relative; text-align: center; width: 60px;
                                                            border-radius: 2em;background-color: #f4516c; color: white;">
                                                        <span class="badge">未完成</span>
                                                    </div>
                                                    <div *ngIf="record.isCompleted==true"
                                                        style="position: relative; text-align: center;width: 60px;
                                                            border-radius: 2em;background-color: #34bfa3;color: white;">
                                                        <span class="badge">已完成</span>
                                                    </div>
                                                </td>
                                                <td style="width: 200px">
                                                    <span class="ui-column-title"> 图号</span>
                                                    <!-- <ng-template  pTemplate="body"> -->
                                                    {{ record.drawingCode }}
                                                    <!-- </ng-template> -->
                                                </td>
                                                <td style="width: 200px">
                                                    <span class="ui-column-title"> 数量</span>
                                                    <!-- <ng-template pTemplate="body"> -->
                                                    <div class="row" style="margin: 0;">
                                                        <div class="col-md-6" style="margin-top:10px;">
                                                            <i class="icon-layers"></i>
                                                            <span
                                                                class="caption-subject bold font-ml">{{ record.totalQuantity }}</span>
                                                        </div>
                                                        <div class="font-grey-cascade col-md-6 text-right">
                                                            <div class="caption-subject font-green">交付:
                                                                {{ record.completedQuantity }}</div>
                                                            <div class="font-grey-cascade">已投:
                                                                {{ record.producedQuantity }}</div>
                                                        </div>
                                                    </div>
                                                    <!-- </ng-template> -->
                                                </td>
                                                <td style="width: 150px">
                                                    <span class="ui-column-title"> 完成时间</span>
                                                    {{ record.completionTime | momentFormat: 'YYYY-MM-DD' }}
                                                </td>
                                                <td style="width: 150px">
                                                    <span class="ui-column-title"> 是否接收</span>
                                                    <div *ngIf="record.isReceived==false"
                                                        style="position: relative; text-align: center; width: 60px;
                                                            border-radius: 2em;background-color: #f4516c; color: white;">
                                                        <span class="badge">未接收</span>
                                                    </div>
                                                    <div *ngIf="record.isReceived==true"
                                                        style="position: relative; text-align: center;width: 60px;
                                                            border-radius: 2em;background-color: #34bfa3;color: white;">
                                                        <span class="badge">已接收</span>
                                                    </div>
                                                </td>
                                                <td style="width: 150px">
                                                    <span class="ui-column-title"> 接收时间</span>
                                                    {{ record.receptionTime | momentFormat: 'YYYY-MM-DD'}}
                                                </td>
                                                <td style="width: 150px">
                                                    <span class="ui-column-title"> 路线</span>
                                                    {{ record.routingLine }}
                                                </td>
                                                <td style="width: 150px">
                                                    <span class="ui-column-title"> 任务备注</span>
                                                    {{ record.remark }}
                                                </td>
                                                <!-- <td style="width: 150px">
                                                        <span class="ui-column-title"> 车间备注</span>
                                                        {{ record.workShopRemark }}
                                                    </td> -->
                                            </tr>
                                        </ng-template>
                                        <ng-template pTemplate="rowexpansion" let-record>
                                            <div class="ui-grid ui-grid-responsive ui-fluid"
                                                style="margin:-0.75em; padding:20px;">
                                                <!-- <div class="ui-grid-row"> -->
                                                <tr>
                                                    <td [attr.colspan]="11">
                                                        <p-table class="detailTable" [value]="record.batches"
                                                            [paginator]="false" [lazy]="true" [scrollable]="true">
                                                            <ng-template pTemplate="header">
                                                <tr>
                                                    <th style="width: 315px">条码</th>
                                                    <th style="width: 315px">数量</th>
                                                    <th style="width: 315px">计划完成时间</th>
                                                    <th style="width: 315px">是否完成</th>
                                                    <th style="width: 315px">完成时间</th>
                                                </tr>
                                        </ng-template>
                                        <ng-template pTemplate="body" let-rowData>
                                            <tr [pSelectableRow]="rowData">
                                                <td style="width: 315px">
                                                    {{ rowData.batchCode }}
                                                </td>
                                                <td style="width: 315px">
                                                    {{ rowData.quantity }}
                                                </td>
                                                <td style="width: 315px">
                                                    {{ rowData.dueDate | momentFormat: 'YYYY-MM-DD' }}
                                                </td>
                                                <td style="width: 315px">
                                                    <div *ngIf="rowData.isCompleted==false"
                                                        style="position: relative; text-align: center; width: 60px;
                                                                                    border-radius: 2em;background-color: #f4516c; color: white;">
                                                        <span class="badge">未完成</span>
                                                    </div>
                                                    <div *ngIf="rowData.isCompleted==true"
                                                        style="position: relative; text-align: center;width: 60px;
                                                                                    border-radius: 2em;background-color: #34bfa3;color: white;">
                                                        <span class="badge">已完成</span>
                                                    </div>
                                                </td>
                                                <td style="width: 315px">
                                                    {{ rowData.completionTime | momentFormat: 'YYYY-MM-DD' }}
                                                </td>
                                            </tr>
                                        </ng-template>
                                    </p-table>
                                    </td>
                                    </tr>
                                    <!-- </div> -->
                                </div>
                                </ng-template>
                                </p-table>
                                <div class="primeng-paging-container">
                                    <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                                        (onPageChange)="getMonths($event,0)"
                                        [totalRecords]="primengTableHelper.totalRecordsCount"
                                        [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                                    </p-paginator>
                                    <span class="total-records-count">
                                        {{ '总计:' + primengTableHelper.totalRecordsCount }} </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<putIntoProductionModal #putIntoProductionModal (modalSave)="getMonths($event,1)"></putIntoProductionModal>
<createOrEditOrderModal #createOrEditOrderModal (modalSave)="getMonths()"></createOrEditOrderModal>
<batchIntoProduceModal #batchIntoProduceModal (modalSave)="getMonths()"></batchIntoProduceModal>
</div>
